<template>
  <div class="playbar">
    <div class="playimg" @click="$parent.popup = true">
      <img :src="img | imgURL(123)" :class="{ go: playingStatus }" />
    </div>
    <div class="title" @click="$parent.popup = true">
      <h1>{{ playingSong.name }}</h1>
      <div class="singer">
        <span>
          <span class="name" v-for="singer in singers" :key="singer.id">
            {{ singer.name }}
          </span>
        </span>
        <span>{{
          playingSong.al ? playingSong.al.name : playingSong.song.album.name
        }}</span>
      </div>
    </div>

    <div class="btns">
      <canvas height="100" width="100" ref="canvas"></canvas>
      <div class="playbtn">
        <h3 class="icon_play" v-if="!playingStatus" @click="playfn"></h3>
        <h3 class="icon_pause" v-else @click="pausefn"></h3>
        <!-- <svg
          t="1635937952547"
          class="icon_pause"
          v-else
          @click="pausefn"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1331"
          width="32"
          height="32"
        >
          <path
            d="M244.83 225.99h203.31c17.84 0 31.82 14.01 31.82 31.59v508.61c0 17.61-13.98 31.82-31.82 31.82H244.83c-17.58 0-31.59-14.21-31.59-31.82V257.58c0.01-17.58 14.01-31.59 31.59-31.59z m330.82 0h203.31c17.81 0 31.8 14.01 31.8 31.59v508.61c0 17.61-13.98 31.82-31.8 31.82H575.65c-17.61 0-32.05-14.21-32.05-31.82V257.58c0-17.58 14.44-31.59 32.05-31.59z m171.49 63.2H607.23v445.42h139.91V289.19z m-330.81 0H276.42v445.42h139.91V289.19z"
            fill="#aaaaaa"
            p-id="1332"
          ></path>
        </svg> -->
      </div>
      <svg
        t="1635938028062"
        class="icon_list"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1526"
        width="32"
        height="32"
        @click="$parent.listShow = true"
      >
        <path
          d="M130.2 848.89c-17.14 0-31.59-14.44-31.59-32.03 0-17.38 14.44-32.05 31.59-32.05h33.62c17.14 0 31.82 14.67 31.82 32.05 0 17.58-14.67 32.03-31.82 32.03H130.2z m228.83-610.58c-17.17 0-31.61-14.24-31.61-31.61 0-17.58 14.44-31.59 31.61-31.59h534.33c17.58 0 32.02 14 32.02 31.59 0 17.37-14.44 31.61-32.02 31.61H359.03z m-228.83 0c-17.14 0-31.59-14.24-31.59-31.61 0-17.58 14.44-31.59 31.59-31.59h33.62c17.14 0 31.82 14 31.82 31.59 0 17.37-14.67 31.61-31.82 31.61H130.2z m228.83 203.52c-17.17 0-31.61-14.44-31.61-31.82 0-17.58 14.44-31.82 31.61-31.82h534.33c17.58 0 32.02 14.24 32.02 31.82 0 17.38-14.44 31.82-32.02 31.82H359.03z m-228.83 0c-17.14 0-31.59-14.44-31.59-31.82 0-17.58 14.44-31.82 31.59-31.82h33.62c17.14 0 31.82 14.24 31.82 31.82 0 17.38-14.67 31.82-31.82 31.82H130.2z m228.83 203.54c-17.17 0-31.61-14.21-31.61-31.59 0-17.61 14.44-32.05 31.61-32.05h534.33c17.58 0 32.02 14.44 32.02 32.05 0 17.38-14.44 31.59-32.02 31.59H359.03z m-228.83 0c-17.14 0-31.59-14.21-31.59-31.59 0-17.61 14.44-32.05 31.59-32.05h33.62c17.14 0 31.82 14.44 31.82 32.05 0 17.38-14.67 31.59-31.82 31.59H130.2z m228.83 203.52c-17.17 0-31.61-14.44-31.61-32.03 0-17.38 14.44-32.05 31.61-32.05h534.33c17.58 0 32.02 14.67 32.02 32.05 0 17.58-14.44 32.03-32.02 32.03H359.03z"
          fill="#aaaaaa"
          p-id="1527"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ["playingSong", "playingStatus", "current", "total"],
  methods: {
    playfn() {
      this.$parent.$refs.audio.play();
    },
    pausefn() {
      this.$parent.$refs.audio.pause();
    },
  },
  computed: {
    img() {
      return this.playingSong.al
        ? this.playingSong.al.picUrl
        : this.playingSong.picUrl;
    },
    singers() {
      return this.playingSong.ar
        ? this.playingSong.ar
        : this.playingSong.song.artists;
    },
  },
  watch: {
    current(n) {
      n;
      let ctx = this.$refs.canvas.getContext("2d");
      // ctx.clearRect(0, 0, 35, 35);
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.arc(
        50,
        50,
        45,
        (Math.PI / 180) * 360 * (this.current / this.total) - 90,
        (Math.PI / 180) * 360
      );
      ctx.strokeStyle = "#ccc";
      ctx.stroke();
      ctx.closePath();
      ctx.beginPath();
      ctx.arc(
        50,
        50,
        45,
        -(Math.PI / 180) * 90,
        (Math.PI / 180) * 360 * (this.current / this.total) -
          (Math.PI / 180) * 90
      );
      ctx.strokeStyle = "#333";
      ctx.stroke();
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes gocircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.playbar {
  display: flex;
  align-items: center;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 5px, 0.2);
  .playimg {
    padding: 8px;
    margin: 0 10px;
    margin-top: -5px;
    background-image: url("../assets/c81.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    img {
      width: 25px;
      border-radius: 50%;
      vertical-align: middle;
      animation: gocircle 8s linear infinite;
      animation-play-state: paused;
      &.go {
        animation-play-state: running;
      }
    }
  }
  .title {
    flex: 1;
    h1 {
      width: 60vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .singer {
      width: 60vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        font-size: 12px;
        color: #aaa;
      }
    }
  }
  .btns {
    display: flex;
    align-items: center;
    padding-right: 10px;
    .playbtn {
      margin-right: 10px;
      // position: relative;
      .icon_play {
        width: 20px;
        height: 20px;
        background-image: url("../assets/bz1.png");
        background-size: 100%;
        background-position: center;
        // margin-left: -20px;
        position: relative;
        right: 7px;
        top: -2px;
      }
      .icon_pause {
        width: 20px;
        height: 20px;
        background-image: url("../assets/ztb.png");
        background-size: 130%;
        background-position: center;
        // margin-left: -20px;
        position: relative;
        right: 6px;
        top: -2px;
      }
    }
    canvas {
      width: 35px;
      height: 35px;
      position: absolute;
      top: 6px;
      right: 51px;
      // background-color: red;
      z-index: -1;
      // border-radius: 50%;
    }
  }
  .name {
    &::after {
      content: "/";
    }
    &:last-of-type {
      &::after {
        content: " - ";
      }
    }
  }
}
</style>